<template>
    <div >
        <div class="xMap" v-if="!readOnly">
            <div class="xMapItem" v-if="address">
                <span class="address">{{ address }}</span>
                <span  class="removeBtn"  @click="closeValue()" >
                <my-icon class="user-del" size="0.9rem" type="icon-icon-test26"></my-icon>
            </span>
            </div>
            <div  class="btn" @click="openMapDialog">
                <my-icon size="1rem" type="icon-ditu1"></my-icon>
            </div>
        </div>
        <div v-else class="x-map-disabled">
            <rx-vue-map
                ref="map"
                v-model="curVal"
                :type="mapType"
                :config="mapType=='baidu'?baiduConfig:amapConfig"
                :showMap="displays.includes('map')"
                :readonly="true"
            >
                <template #display>
                    <div v-if="displays.includes('address')">{{address}}</div>
                    <div v-if="displays.includes('location')" >{{i18n('coordinates', '坐标')}}：{{location}}</div>
                </template>
            </rx-vue-map>
        </div>
    </div>
    <RxEmpty v-if="readOnly && !curVal"></RxEmpty>
</template>

<script>
/*
文本框控件
 */
import MForm from '../js/MForm'
import FormBase from "../js/FormBase";
import Dialog from "@/js/Dialog";
import mapConfig from "@/components/RxMapDialog/mapConfig"
import RxVueMap from "@/components/MapViews/RxVueMap.vue";
import RxEmpty from "@/components/RxEmpty"
export default {
    name: "MMap",
    mixins: [MForm,FormBase,mapConfig],
    components: {
        RxVueMap,
        RxEmpty
    },
    data() {
        return {
            curVal:"",
        }
    },
    computed: {
        address() {
            return this.curVal?JSON.parse(this.curVal).address:null;
        },
        mapType() {
            return this.metadata.options.mapType;
        },
        location() {
            let location="";
            let value=this.curVal?JSON.parse(this.curVal):"";
            if(value){
                location=value.latitude+","+value.longitude;
            }
            return location;
        },
        displays() {
            let displays=["address"];
            if(this.metadata.options.display && this.metadata.options.display.length>0){
                displays=this.metadata.options.display;
            }
            return displays;
        },
    },
    created() {
        this.setCenter(this.curVal);
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "mapLang", key);
        },
        closeValue(){
            this.curVal="";
            this.changeValue(this.curVal);
        },
        changeValue(value){
            this.updateValue(value);
            this.triggerEmitEvents('change',value)
        },
        openMapDialog(){
            let _self =this;
            let conf={
                data:{
                    options:_self.metadata.options,
                    locations:_self.curVal,
                    center:_self.metadata.options.locations
                },
                curVm:this
            };
            Dialog.openMapDialog(conf,(obj)=>{
                if(obj.action!='ok'){
                    return;
                }
                _self.curVal = obj.data || "";
                _self.changeValue(_self.curVal);
            })
        },
    },
    watch: {
        value: {
            handler(v) {
                this.curVal = v;
            },
            deep: true,
            immediate: true
        }
    },
}
</script>

<style scoped>
.xMap{
    font-size: 0;
}
.xMap .xMapItem,
.xMap .btn{
    font-size: 14px;
    display: inline-block;
    background: #f5f7fa;
    border: 1px solid #dadde0;
    border-radius: 3px;
    margin-top: 4px;
}
.xMap .xMapItem{
    line-height: 32px;
    height: 32px;
    font-size: 0;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 8px;
    vertical-align: top;

}
.xMap .btn{
    width: 32px;
    height: 32px;
    line-height: 32px;
    padding: 0 6px;
    text-align: center;
    margin-right: 6px;
    box-sizing: border-box;
    cursor: pointer;
}
.address{
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    font-size: 14px;
    box-sizing: border-box;
}
.xMapItem .removeBtn{
    line-height: normal;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
}
.xMapItem .removeBtn:hover{
    color:#ff4d4f ;
}
</style>
